<template>
	<view class="content">

		<view class="bg"
			:style="{backgroundImage: `linear-gradient(to top, ${backgroundColor}, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), ${backgroundColor})`}">

		</view>

		<view class="barrage">
			<view class="barrage_y" v-for="(item ,index) in news_list">

				<view class="barrage_item">
					<image :src="item.pic" mode=""></image>
					<text>{{item.title}}</text>

				</view>
			</view>
		</view>
		<view class="backtrack" @click="returnPage">
			<image src="../../static/returnPage.png" mode=""></image>
		</view>
		<view class="rule" @click="ruleShow=true" v-if="game_config.pic">
			<view class="">
				规则
			</view>
			<view class="">
				简介
			</view>
		</view>
		<view class="substitution" @click="captainShow=true" v-if="teamShow">
			<image src="../../static/substitution.png" mode=""></image>
			<view class="text">
				队伍
			</view>
		</view>
		<view class="photograph" @click="addImage">
			<image src="../../static/photograph.png" mode=""></image>
			<view class="text">
				拍照
			</view>
		</view>


		<u-popup :show="verifyShow" mode="center" round="calc(20vmin / 7.5)" :safeAreaInsetBottom="false"
			zIndex="999999">
			<view class="popup_">
				<image class="bg" src="../../static/game/porpCardImg_.png" mode=""></image>
				<view class="" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;">
					<view class="answerText">
						请确认成绩
					</view>
					<view class="team_list">
						<view class="team_item">
							<image :src="apply.teamList.pic" mode=""></image>
							<view class="name">
								{{apply.teamList.title}}
							</view>
							<view class="">
								得分：{{apply.number}}
							</view>
						</view>
					</view>

					<view class="btn">
						<view class="" @click="confirm(1)">
							<text>无异议</text>
							<u-icon name="checkmark-circle" color="#44AF64" size="28"></u-icon>
						</view>
						<view class="" @click="confirm(2)">
							<text>请更正</text>
							<u-icon name="close-circle" color="#FF4D4D" size="28"></u-icon>
						</view>
					</view>

				</view>



			</view>
		</u-popup>

		<u-popup :show="captainShow" @close="captainShow=false" mode="right">
			<view class="title">
				队伍信息
			</view>
			<scroll-view scroll-y="true" style="height: 100vh;position: relative;padding-top: calc(60vmin / 7.5);">


				<view class="team_item" v-for="(item ,index) in teamList">
					<view class="team_text">
						<image :src="item.pic" mode=""></image>
						<view class="text">
							{{item.title}}
						</view>
					</view>

					<view class="team_member">
						<view class="image" v-for="(items ,indexs) in item.people"
							@click="setCandidateCaptain(items,item)">

							<view class="setCaptain" v-if="items.user_id==candidate.user_id" @click="setCaptain">
								设为队长
								<view class="">

								</view>
							</view>
							<image :src="items.user_pic" mode=""
								:style="{border:items.sex==2?'calc(4vmin / 7.5) solid #E3C9D8':''}"></image>
							<view class="type" v-if="items.cap_zt==2">
								队长
							</view>
							<view class="">
								{{items.user_name}}
							</view>
						</view>

					</view>

				</view>

			</scroll-view>
		</u-popup>

		<u-overlay :show="ruleShow" @click="ruleShow = false">
			<view style="display: flex;justify-content: center;flex-direction: column;height: 100vh;">
				<image :src="game_config.pic" mode="heightFix" style="height: 80vh;margin: 0 auto;"></image>
			</view>
		</u-overlay>
		<!-- @click="setShakeShow" -->
		<u-overlay :show="shakeShow">
			<view
				style="display: flex;justify-content: center;flex-direction: column;height: 100vh;position: relative;">
				<view class="timeText">
					{{num}}s 后自动关闭
				</view>
				<image class="rect" src="../../static/game/shake.png" mode=""
					style="width: calc(216vmin / 7.5);height: calc(216vmin / 7.5);margin: 0 auto;"></image>
				<view class=""
					style="font-size: calc(40vmin / 7.5);color: #fff;font-weight: 700;text-align: center;margin-top: calc(40vmin / 7.5);">
					为团队呐喊加油，摇一摇吧
				</view>
			</view>
		</u-overlay>


		<u-popup :show="awardShow" mode="center" round="calc(20vmin / 7.5)" @click="awardShow=false">
			<view class="popup_">
				<image :src="award.pic" mode="" v-if="award.pic"
					style="position: absolute;top: 0;right: 0;width: 100%;height: 100%;"></image>
				<block v-else>
					<image class="bg" :src="`/static/game/${award.type==1?'porpCardImg1':'porpCardImg'}.png`" mode="">
					</image>
					<image
						style="width: calc(240vmin / 7.5);height: calc(240vmin / 7.5);margin: calc(40vmin / 7.5) auto;display: block;position: relative;z-index: 9;"
						:src="`/static/game/${award.type==1?'discount':'time'}.png`" mode=""></image>
				</block>
				<view class="awardText"
					:style="{color:award.type==1?'#FF5829':'#65CF93',top:award.pic?'calc(-60vmin / 7.5)':'calc(400vmin / 7.5)'}">
					{{award.pic?``:`恭喜您获得${award.title}`}}
				</view>

			</view>
		</u-popup>

		<u-popup :show="guideShow" mode="center" round="20rpx" closeable @close="guideClose"
			:safeAreaInsetBottom="false">
			<view class="time">
				{{number?number+'s 后可关闭':'点击关闭'}}
			</view>
			<image @click="guideClose" style="width: 80vw;"
				src="https://wjlm.goldsu.cn/file/d915fcbe-2d63-4615-adcc-774b2273397e.png"
				mode="widthFix"></image>
		</u-popup>

	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	let num = 0
	export default {
		props: {
			backgroundColor: {
				type: String,
				default: 'rgba(0, 0, 0, .4)'
			}
		},
		data() {
			return {
				captainShow: false,
				teamShow: false,
				verifyShow: false,
				shakeShow: false,
				ruleShow: false,
				awardShow: false,
				guideShow: false,
				gameData: {},
				apply: {},
				teamList: [],
				userPeople: {},
				candidate: {},
				game_chall: [],
				game_config: {},
				news_list: [],
				audio: '',
				award: {},
				cap_zt: 1,
				acceptStatus: true,
				shakeTime: null,
				number: 5,
				num: 0
				// result_confirm:[]
			}
		},
		watch: {
			guideShow() {
				if (this.guideShow) {
					let ter = setInterval(() => {
						if (this.number == 0) {
							clearInterval(ter)
						} else {
							this.number--
						}

					}, 1000)
				}
			},
			cap_zt(a, b) {
				console.log('嘿嘿额', a, b)

				if (this.cap_zt == 2) {
					if (num) {
						this.guideShow = true
					} else {
						num++
					}
				}
			}

		},
		destroyed() {
			this.acceptStatus=false
		},
		mounted() {
			num = 0
			uni.$on('onMessage', (res) => {
				if(!this.acceptStatus) return;
					this.gameData = res.data.game
					this.teamList = res.data.team
					this.userPeople = res.data.userPeople
					this.game_chall = res.data.game_chall
					if (res.data.news_list.length) {
						this.news_list.push(...res.data.news_list)
							setTimeout(() => {
								this.news_list.splice(0,res.data.news_list.length)
							}, 30000)
					}

					if (res.data.game_config) {

						this.audio = res.data.game_config.audio

						if (this.game_chall && this.game_chall.length && this.game_chall[0].time != 0 &&
							res.data.game_config
							.people_id && res.data.game_config.people_id == this.userPeople.user_id) {
							this.shake()
						}
					}
					this.game_config = res.data.game_config
					if (this.userPeople) {
						this.cap_zt = this.userPeople.cap_zt
					}

					if (this.game_chall) {

						this.game_chall.forEach(item => {
							if (!item.result_confirm) return;
							item.result_confirm.forEach(items => {
								if (items.team_id == this.userPeople.teamId && this
									.userPeople
									.cap_zt ==
									2 && items
									.count == 0) {
									this.apply = item
									this.verifyShow = true
								}
							})
						})
						// if (this.game_chall&&this.game_chall[0].result_confirm) {
						// 	this.game_chall[0].result_confirm.forEach(item => {
						// 		if (item.time_id == this.userPeople.teamId && this.userPeople.cap_zt == 2 && item
						// 			.count == 0) {

						// 			this.verifyShow = true
						// 		}
						// 	})
						// }
					}

					if (this.userPeople.user_id == this.gameData.user_id || this.userPeople.cap_zt == 2)
						this
						.teamShow = true
			})





		},
		methods: {
			setShakeShow() {
				this.shakeShow = false

				clearTimeout(this.shakeTime)
				this.shakeTime = null
				this.$ws.send(JSON.stringify({
					game_id: this.gameData.id,
					user_id: this.userPeople.user_id
				}))
			},
			guideClose() {
				if (this.number) return;
				this.guideShow = false
			},
			shake() {
				if (this.shakeTime) return;
				this.shakeTime = setTimeout(() => {
					let that = this
					that.shakeShow = true
					this.num = 5
					let time = setInterval(() => {
						if (this.num <= 0) {
							this.setShakeShow()
							clearInterval(time)
						} else {
							this.num--
						}
					}, 1000)

					uni.startAccelerometer({
						interval: 'game', 
						success: function() {
							uni.onAccelerometerChange(function(res) {
								if(!that.shakeShow) return;
								if (res.x > 2 || res.y > 2 || res.z > 2) {
									that.shakeShow = false
									clearTimeout(that.shakeTime)
									that.shakeTime = null
									
									uni.offAccelerometerChange();
									uni.stopAccelerometer();
									let data = {
										game_id: that.gameData.id,
										activ_id: that.gameData.activ_id,
										team_id: that.userPeople.teamId,
										people_id: uni.getStorageSync("userData").user_id
									}
									

									that.$myRuquestWs('home/game/game_rewa', data).then(
										res => {
											if (res.data.type == 1) uni.showToast({
												title: '可在 我的-优惠券 中查看',
												icon: 'none'
											});
											that.award = res.data
											that.awardShow = true
										})
								}
							})
						}
					})
				}, this.game_config.rewa_time * 1000)


			},
			setCandidateCaptain(items, item) {
				this.candidate = {}
				if (this.userPeople.user_id !== this.gameData.user_id) { //我是否为创始人  否
					if (this.userPeople.cap_zt !== 2) return; //我是队长
					if (this.userPeople.teamId !== item.id) return; //置换队员是为同队
				}
				if (items.cap_zt == 2) return; //置换成员是否已经为队长
				this.candidate = items
				this.candidate.teamId = item.id
			},
			confirm(status) {
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId,
					team_id_s: this.apply.team_id,
					status
				}
				let url = 'home/game/result_confirm'
				if (this.game_config.type == 9 || this.game_config.type == 10) url = 'home/game/result_confirm_pk'
				this.verifyShow = false
				this.$myRuquestWs(url, data).then(res => {
					
				})
			},
			setCaptain() {
				this.$myRuquestWs('home/game/team_manag', {
					game_id: this.gameData.id,
					team_id: this.candidate.teamId,
					user_id_s: this.candidate.user_id
				}).then(res => {
					this.candidate = {}
				})
			},
			addImage() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						console.log(res.tempFilePaths[0]);
						that.$uploadFiles({
							filePath: res.tempFilePaths[0]
						}).then(res => {
							that.$myRuquestWs('home/game/game_photo', {
								game_id: that.gameData.id,
								activ_id: that.gameData.activ_id,
								docx: JSON.parse(res.data).data
							})
						})

					}
				});
			},
			returnPage(){
				if(this.$ws) this.$ws.completeClose()
				uni.removeStorageSync('gameId');
				this.$audioStop()
				uni.switchTab({
					url: '/pages/index_/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.timeText {
		position: absolute;
		top: calc(30vmin / 7.5);
		left: calc(30vmin / 7.5);
		font-size: calc(26vmin / 7.5);
		padding: calc(4vmin / 7.5) calc(10vmin / 7.5);

		height: calc(40vmin / 7.5);
		background-color: rgba(0, 0, 0, .23);
		border-radius: calc(40vmin / 7.5);
		line-height: calc(40vmin / 7.5);
		text-align: center;
		color: #ffffff;

	}

	.time {
		position: absolute;
		top: calc(20vmin / 7.5);
		left: calc(20vmin / 7.5);
		padding: calc(4vmin / 7.5) calc(10vmin / 7.5);

		height: calc(40vmin / 7.5);
		background-color: rgba(0, 0, 0, .23);
		border-radius: calc(40vmin / 7.5);
		line-height: calc(40vmin / 7.5);
		text-align: center;
		color: #ffffff;

	}

	// .content {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 1;
	// }
	.awardText {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(40vmin / 7.5);
		text-align: center;
		font-size: calc(44vmin / 7.5);
		font-weight: 700;
	}

	.barrage {
		position: fixed;
		top: calc(40vmin / 7.5);
		left: 0;
		right: 0;
		z-index: 9999;

		.barrage_y {
			position: relative;
			height: calc(80vmin / 7.5);



			.barrage_item {
				display: flex;
				align-items: center;

				image {
					width: calc(40vmin / 7.5);
					height: calc(40vmin / 7.5);
					border-radius: 50%;
					margin-right: calc(10vmin / 7.5);
				}

				font-size: calc(34vmin / 7.5);
				text-shadow: 0 0 calc(2vmin / 7.5) #333;
				color: #FAD686;

				background-color: rgba(250, 214, 134, .1);
				border: 1upx solid #FAD686;
				box-shadow: 0 0 calc(2vmin / 7.5) #333;
				height: calc(60vmin / 7.5);
				line-height: calc(60vmin / 7.5);
				padding: 0 calc(20vmin / 7.5);
				border-radius: calc(30vmin / 7.5);
				position: absolute;
				right: -120%;
				animation: move 30s linear;
				white-space: nowrap;
			}
		}
	}

	@keyframes move {
		0% {
			right: -20%;
		}

		100% {
			right: 120%;
		}
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;

		width: 100vw;
		height: 100vh;
	}

	.title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: calc(10vmin / 7.5);

		text-align: center;
	}

	.team_item {
		padding: calc(20vmin / 7.5) calc(40vmin / 7.5);
		padding-bottom: calc(40vmin / 7.5);
		background-color: #ffffff;
		margin-top: calc(10vmin / 7.5);

		.team_text {
			display: flex;
			align-items: center;

			image {
				width: calc(80vmin / 7.5);
				height: calc(80vmin / 7.5);
				margin-right: calc(20vmin / 7.5);
				border: calc(4vmin / 7.5) solid #F4D6AA;
				border-radius: 50%;
			}

			.text {
				flex: 1;
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;

				font-size: calc(28vmin / 7.5);
				color: #333333;

				.joinBtn {
					text {
						background-color: #999999;
						color: #ffffff;
						font-size: calc(24vmin / 7.5);
						text-align: center;
						padding: calc(5vmin / 7.5) calc(15vmin / 7.5);
						;
						border-radius: calc(40vmin / 7.5);

					}
				}

				>view:nth-child(2) {
					font-weight: 700;
				}
			}
		}

		.team_member {
			display: flex;
			flex-wrap: wrap;
			margin: calc(20vmin / 7.5) 0;

			.image {
				width: calc(116vmin / 7.5);
				margin-bottom: calc(20vmin / 7.5);
				position: relative;

				.setCaptain {
					position: absolute;
					top: calc(-75vmin / 7.5);
					z-index: 999;
					background-color: #333;
					padding: calc(5vmin / 7.5) calc(20vmin / 7.5);
					border-radius: calc(8vmin / 7.5);
					overflow: visible;
					color: #ffffff;

					view {
						width: 0;
						height: 0;
						position: absolute;
						bottom: calc(-36vmin / 7.5);
						z-index: 999;
						border: calc(25vmin / 7.5) solid transparent;
						border-top: calc(15vmin / 7.5) solid #333;
					}
				}

				// height: 116upx;
				image {
					width: calc(94vmin / 7.5);
					height: calc(94vmin / 7.5);
					margin: 0 calc(8vmin / 7.5);
					border-radius: calc(4vmin / 7.5);
					border: calc(4vmin / 7.5) solid #91BCE6;
				}

				.type {
					color: #AC7D3D;
					font-size: calc(24vmin / 7.5);
					font-weight: 700;
					width: calc(70vmin / 7.5);
					height: calc(40vmin / 7.5);
					line-height: calc(40vmin / 7.5);
					text-align: center;
					border-radius: calc(40vmin / 7.5);
					background-color: #FED194;
					margin: 0 auto;
					margin-top: calc(-40vmin / 7.5);
					position: relative;
					top: calc(14vmin / 7.5);
					z-index: 9;
				}

				view {
					font-size: calc(28vmin / 7.5);
					color: #666666;
					text-align: center;
					margin-top: calc(15vmin / 7.5);
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //用省略号显示
					white-space: nowrap;
				}
			}
		}
	}

	.popup_ {
		position: relative;
		width: calc(814vmin / 7.5);
		height: calc(484vmin / 7.5);


		.answerText {
			color: #333;
			font-size: calc(30vmin / 7.5);
			text-align: center;
			position: absolute;
			top: calc(70vmin / 7.5);
			left: 50%;
			transform: translateX(-50%);
			font-weight: 700;
			width: 100%;
		}

		.bg {
			position: absolute;
			width: calc(814vmin / 7.5);
			height: calc(484vmin / 7.5);
			top: 0;
			left: 0;
			z-index: 8;
		}
	}

	.team_list {
		display: flex;
		flex-direction: column;

		.team_item {
			margin: calc(8vmin / 7.5) 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: calc(28vmin / 7.5);
			font-weight: 700;
			color: #333333;
			margin-top: calc(120vmin / 7.5);

			image {
				width: calc(90vmin / 7.5);
				height: calc(90vmin / 7.5);
				border-radius: calc(8vmin / 7.5);
			}

			.name {
				padding: 0 calc(30vmin / 7.5);
			}

		}
	}

	.btn {
		display: flex;
		height: calc(100vmin / 7.5);
		line-height: calc(100vmin / 7.5);
		text-align: center;
		align-items: center;
		border-top: 1upx solid #C8C8C8;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;

		>view {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: calc(40vmin / 7.5);
			font-weight: 700;
			color: #FF4D4D;
		}

		>view:nth-child(1) {
			border-right: 1upx solid #C8C8C8;
			color: #44AF64;
		}
	}

	.rule {
		position: fixed;
		bottom: calc(40vmin / 7.5);
		left: calc(40vmin / 7.5);
		width: calc(96vmin / 7.5);
		height: calc(96vmin / 7.5);
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.23);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: calc(24vmin / 7.5);
		color: #ffffff;
	}

	.popup {
		position: relative;
		width: calc(624vmin / 7.5);
		height: calc(484vmin / 7.5);

	}
</style>
